<template>
    <div>
        <el-card class="box-card" shadow="never">
            <!--导航栏-->
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>街道设置</el-breadcrumb-item>
                 <el-breadcrumb-item>街道设置</el-breadcrumb-item>
            </el-breadcrumb>
            <el-form ref="form" class="edit-el-form"  :model="form" :rules="rules" label-width="auto">
                <el-form-item label="街道名称" prop="organ_name">
                    <el-input v-model="form.organ_name" required></el-input>
                </el-form-item>
                <el-row>
                  <el-col :span="10">
                      <el-form-item label="经度" prop="x_coordinate">
                          <el-input v-model="form.x_coordinate"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="10">
                      <el-form-item label="纬度" prop="y_coordinate">
                          <el-input v-model="form.y_coordinate"></el-input>
                      </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="在线说事" prop="open_shuoshi">
                   <el-switch
                     v-model="form.open_shuoshi"
                     active-value='1'
                     inactive-value='0'
                     active-color="#13ce66">
                   </el-switch>
                </el-form-item>
                <el-form-item label="街道简介" prop="organ_introduce">
                  <Editor :catchData="catchData" :child_content="organ_content"></Editor>
                </el-form-item>
                <!--查看不展示按钮-->
                <el-form-item>
                    <el-button type="primary" @click="submitForm('form')" :loading="loading">{{button_name}}</el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script>
    import { getOrganInfo,editOrgan } from '@/api/organ.js'
    import Editor from '@/components/Editor.vue';
    export default {
        name:'OrganSetting',
        components:{ Editor },
        inject:['reload'],
        data() {
            return {
                form: {
                    organ_name:'',
                    x_coordinate:'',
                    y_coordinate:'',
                    open_shuoshi:'0',
                    organ_introduce:'',
                },
                //校验规则
                rules:{
                    organ_name: [
                        { required:true , message:'请输入街道名称',trigger:'blur' }
                    ],
                    x_coordinate:[
                        { required:true , message:'请输入经度',trigger:'blur' }
                    ],
                    y_coordinate:[
                        { required:true , message:'请输入纬度',trigger:'blur' }
                    ]
                },
                //加载组件
                loading: false,
                button_name:'立即提交',
                content:'街道设置',
                organ_content:'',
            }
        },
        methods: {
            submitForm(formName){
                let that = this;
                    this.$refs[formName].validate((valid) => {
                            if (valid) {
                                //判断内容不为空
                                if(this.form.organ_introduce==''){
                                    this.$message({
                                        message:'请输入街道简介',
                                        type:'error',
                                        duration:1000,
                                    });
                                    return false;
                                };
                                this.loading=true;
                                this.button_name='正在提交';
                                let send_data={
                                    api_token:this.$store.getters.getSessionId,
                                    organ_name:this.form.organ_name,
                                    x_coordinate:this.form.x_coordinate,
                                    y_coordinate:this.form.y_coordinate,
                                    open_shuoshi:this.form.open_shuoshi,
                                    organ_introduce:this.form.organ_introduce
                                };
                                if(this.id!=-1){
                                    send_data.id=this.id;
                                }
                                editOrgan(send_data).then(function(response){
                                    let code=response.data.code;
                                     let type=code==1?'success':'error';
                                     let msg=code==1?'成功':'失败';
                                     that.$message({
                                         message:that.content+msg,
                                         duration:1200,
                                         type:type,
                                         onClose:function(e){
                                             that.loading=false;
                                             if(code==1){
                                                that.$router.push('/organsetting');
                                             }else{
                                                that.button_name='立即提交';
                                             }
                                         }
                                    })
                                })
                            }else{
                                setTimeout(()=>{
                                  const is_error=document.getElementsByClassName('is-error');
                                  is_error[0].querySelector('input').focus();
                                },100);
                                return false;
                            }
                    })
            },
            back(){
                this.$router.go(-1);
            },
            //富文本内容
            catchData(e){
               this.form.organ_introduce=e;
            },
        },
        created(){
            let send_data={
                api_token:this.$store.getters.getSessionId,
            }
            let that=this;
            getOrganInfo(send_data).then(function(response){
                if(response.data.code==1){
                  let val=response.data.info;
                  that.form.organ_name=val.organ_name;
                  that.form.x_coordinate=val.x_coordinate;
                  that.form.y_coordinate=val.y_coordinate;
                  that.form.organ_introduce=val.organ_introduce;
                  that.form.open_shuoshi=val.open_shuoshi.toString();
                  that.organ_content=val.organ_introduce;
                }
            })
        },
        computed:{
            id(){
                return this.$route.params.id;
            }
        }
    }
</script>

<style>
    .edit-el-form{
        margin-top:30px;
    }
</style>
